<template>
  <el-container class="layout">
    <transition @enter="sidebarAnimation.enter" @leave="sidebarAnimation.leave">
      <el-aside width="200px" v-show="!layoutStore.hideAside">
        <layout-sidebar />
      </el-aside>
    </transition>
    <el-container class="layout-container">
      <el-header>
        <layout-header />
      </el-header>
      <el-main>
        <h1 class="layout-title" v-if="pageTitle">{{ pageTitle }}</h1>
        <div class="layout-main">
          <router-view />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import LayoutHeader from '@/components/Layout/header.vue'
import useMenuStore from '@/stores/menu'
import LayoutSidebar from '@/components/Layout/sidebar.vue'
import useLayoutStore from '@/stores/layout'
import sidebarAnimation from '@/components/Layout/sidebar.animation.js'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
const route = useRoute()
const menuStore = useMenuStore()
const layoutStore = useLayoutStore()
menuStore.init()

const pageTitle = computed(() => {
  return layoutStore.pageTitle || ''
})
</script>

<style lang="scss">
.layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f5f7fa;
  .el-header {
    padding: 0;
    --el-header-height: 76px;
  }
  .el-main {
    display: flex;
    flex-direction: column;
  }
  &-title {
    padding-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1d;
    line-height: 1em;
  }
  &-main {
    flex: 1;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
}
</style>
